<!-- 添加或修改宿舍管理员 -->
<template>
  <div class="AddAndUpdata-container" v-loadings="loadingRef">
    <el-dialog
      v-model="props.isAddAndUpdataDialog"
      :title="titleRef"
      width="500"
      @close="closeDialog"
    >
      <UpdateBox
        v-if="adminInfon[0].text"
        :MaskSleSelectData="MaskSleSelectDataRef"
        :avatar="avatarRef"
        :dataArr="adminInfon"
        @click="headleSelect"
      ></UpdateBox>
      <AddBox @click="headleSelect" :MaskSleSelectData="MaskSleSelectDataRef" v-else></AddBox>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="warning" v-if="adminInfon[0].text" @click="quitAdmin">管理员退出</el-button>
          <el-button
            type="primary"
            @click="headleSumbit(adminInfon[0].text ? 0 : 1)"
            >{{ adminInfon[0].text ? "修改" : "添加" }}</el-button
          >
          <el-button type="danger" @click="closeDialog">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <MaskSelBox
      @closeMaskSel="isMaskSleRef = false"
      v-if="isMaskSleRef"
      :maskSelBox="MaskSleDataRef"
      @MaskSelSelect="MaskSelSelect"
    ></MaskSelBox>
  </div>
</template>

<script setup>
import { defineAsyncComponent, reactive, ref, watchEffect } from "vue";
import { getDormitory } from "@/api/dormitoryInfo.js";
import { useUserStore } from "@/store/useUserStore.js";
const UpdateBox = defineAsyncComponent(() =>
  import("@/components/UpdateBox/index.vue")
);
const AddBox = defineAsyncComponent(() =>
  import("@/components/AddBox/index.vue")
);
const MaskSelBox = defineAsyncComponent(() =>
  import("@/components/MaskSelBox/index.vue")
);
import { getAdmin, updateDAdmin,allAdmin,quitDormitory } from "@/api/user.js";
const { getUserInfo } = useUserStore();
const props = defineProps({
  dormitoryInfo: {
    type: Object,
    default: () => ({}),
  },
  isAddAndUpdataDialog: {
    type: Boolean,
    default: false,
  },
});
const loadingRef = ref(false);
const isMaskSleRef = ref(false);
const titleRef = ref("添加宿舍管理员");
const MaskSleSelectDataRef = ref(null); // 遮罩层选中的数据
// 获取该宿舍楼的的管理员
const getAdminInfoRef = ref(null);
// 修改组件需要的数据
const adminInfon = reactive([
  {
    label: "姓名",
    text: "",
    attribute: "Nickname",
  },
  {
    label: "学工号",
    text: "",
    attribute: "adminId",
  },
  {
    label: "手机号",
    text: "",
    attribute: "phone",
  },
]);
// 遮罩层展示的数据
const MaskSleDataRef = ref([]);
const avatarRef = ref(null); // 头像
watchEffect(async () => {
  if (!props.dormitoryInfo) return;
  titleRef.value = "添加宿舍管理员";
  for (const item of adminInfon) {
      item["text"] = "";
    }
    getAdminInfoRef.value = null
  loadingRef.value = true;
  const { data } = await getDormitory(props.dormitoryInfo.id);
  if (data[0].AdminInfon) {
    titleRef.value = "修改宿舍管理员";
    for (const item of adminInfon) {
      item["text"] = data[0].AdminInfon[item.attribute];
    }
    avatarRef.value = data[0].AdminInfon.avatar;
    getAdminInfoRef.value = data[0].AdminInfon;
  }
  loadingRef.value = false;
  
});
const emit = defineEmits(["closeDialog"]);
// 关闭Dialog层
const closeDialog = () => {
  MaskSleSelectDataRef.value = null;
  emit("closeDialog");
};
// 打卡遮罩层
const headleSelect = async () => {
  isMaskSleRef.value = true;
  const { data } = await getAdmin(1);
  MaskSleDataRef.value = data
    .filter((item) => getAdminInfoRef.value ? item.id !== getAdminInfoRef.value.id : item.id)
    .map((it) => {
      return {
        id: it.id,
        value: [
          {
            label: "头像",
            text: it.avatar,
            attribute: "avatar",
          },
          {
            label: "姓名",
            text: it.Nickname,
            attribute: "Nickname",
          },
          {
            label: "学工号",
            text: it.adminId,
            attribute: "adminId",
          },
          {
            label: "手机号",
            text: it.phone,
            attribute: "phone",
          },
        ],
      };
    });
  };
// 遮罩层选中的数据
const MaskSelSelect = (data) => {
  isMaskSleRef.value = false;
  MaskSleSelectDataRef.value = data;
};
// 修改或添加
const headleSumbit = async (item) => {
  if (!MaskSleSelectDataRef.value) {
    ElMessage.error("请选择数据");
    return;
  }
  if (!item) {
    const datas = {
      dormitoryId: props.dormitoryInfo.id,
      oldAdminId: getAdminInfoRef.value.id,
      newAdminId: MaskSleSelectDataRef.value.id,
    };
    const { data } = await updateDAdmin(datas);
    if (data) {
      ElMessage({
        message: "修改成功",
        type: "success",
      });
      await getUserInfo();
      closeDialog();
      MaskSleSelectDataRef.value = null;
    }
  } else {
    const {data} = await allAdmin({
      dormitoryId:props.dormitoryInfo.id,
      adminInfoId:MaskSleSelectDataRef.value.id
    })
    if (data) {
      ElMessage({
        message: "分配成功",
        type: "success",
      });
      await getUserInfo();
      closeDialog();
      MaskSleSelectDataRef.value = null;
    }
  }
};
// 管理员退出
const quitAdmin = async () => {
  const {data} = await quitDormitory(props.dormitoryInfo.id)
  if (data) {
      ElMessage({
        message: "退出成功",
        type: "success",
      });
      await getUserInfo();
      closeDialog();
      MaskSleSelectDataRef.value = null;
    }
}
</script>

<style lang="less" scoped>
.AddAndUpdata-container {
  width: 100%;
  height: 100%;
}
</style>